<template>
  <el-table-column v-if="attrs.type !== 'selection' && attrs.type !== 'index'" :show-overflow-tooltip="true" align="center" v-bind="attrs">
    <template slot-scope="scope">
      <!-- 显示缩略图 -->
      <template v-if="attrs.type === 'img'">
        <el-image
          v-if="_get(scope.row, attrs.prop)"
          :src="_get(scope.row, attrs.prop)"
          :style="imgSize"
          fit="cover"
          :preview-src-list="[_get(scope.row, attrs.prop)]"
        />
        <span v-else>{{ emptyHolder }}</span>
      </template>
      <!-- 自定义显示数据 -->
      <slot v-else-if="attrs.custom" :name="attrs.custom" v-bind="scope"></slot>
      <!-- 基础数据显示 -->
      <template v-else>
        <template v-if="attrs.formatter">
          {{
            attrs.formatter(
              scope.row,
              scope.column,
              _get(scope.row, attrs.prop)
            ) || emptyHolder
          }}
        </template>
        <template v-else>
          {{
            _get(scope.row, attrs.prop) === 0 || _get(scope.row, attrs.prop)
              ? _get(scope.row, attrs.prop)
              : emptyHolder
          }}
        </template>
      </template>
    </template>
  </el-table-column>
  <el-table-column v-else align="center" v-bind="attrs" />
</template>

<script>
import _get from 'lodash/get'
export default {
  props: {
    attrs: {
      type: Object,
      default() {
        return {}
      }
    },
    // 空值 占位符
    emptyPlaceholder: {
      type: String,
      default() {
        return '--'
      }
    }
  },
  data() {
    return {
      emptyHolder: this.emptyPlaceholder
    }
  },
  computed: {
    imgSize() {
      return {
        width: `${this.attrs.imageWidth || 80}px`,
        height: `${this.attrs.imageHeight || 40}px`
      }
    }
  },
  methods: {
    _get
  }
}
</script>

<style scoped></style>
